<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="修改msg" @click="msg='No'">
        <h3 id="h3">{{ msg }}</h3>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'ok'
            },
            methods: {
                show() {
                    console.log('执行了show方法');
                }
            },
            // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，
            // 会执行它
            beforeCreate() {
                // console.log(this.msg);
                // this.show();
                // 注意：在beforeCreate生命周期函数执行的时候，
                // data和methods中的数据都没有被初始化
            },
            // 这是我们遇到的第二个生命周期函数
            created() {
                // console.log(this.msg);
                // this.show();
                // 在created中，data和methods都已经被初始化好了
                // 如果要调用methods中的方法，或者操作data中的数据，
                // 最早，只能在created中操作
            },
            // 这是遇到的第三个生命周期，表示模板已经在内存中编译完成了，
            // 但是尚未把模板渲染到页面中
            beforeMount() {
                console.log(document.getElementById('h3').innerText);
                // 在beforMount执行的时候，页面中的元素，还没有被真正的替换过来，
                // 只是之前写的一些模板字符串
            },
            // 这是遇到的第四个生命周期函数，
            // 表示内存中的模板已经真是的挂在到页面中，
            // 用户已经可以看到渲染后的页面了
            mounted() {
                console.log(document.getElementById('h3').innerText);
                // 注意：mounted是实例创建期间的最后一个生命周期函数，
                // 当执行完mounted就表示，实例已经被完全创建好了，
                // 此时，如果没有其它操作的话，这个实例，就静静的躺在内存中，
                // 一动不动
            },
            // 接下来是运行中的两个事件
            // 这时候，表示我们的界面还没有被更新，
            // 数据被更新了吗？】 数据肯定被更新了
            beforeUpdate() {
                // console.log("界面上元素的内容： " + document.getElementById('h3').innerText);
                // console.log('data 中的 msg 数据是：' + this.msg);
                // 得出结论：当执行beforeUpdate的时候，页面中显示的数据还是旧的，
                // 此时data数据是最新的，页面尚未和最新的数据保持同步
            },

            updated() {
                console.log("界面上元素的内容： " + document.getElementById('h3').innerText);
                console.log('data 中的 msg 数据是：' + this.msg);
                // updated 事件执行的时候，页面和data数据已经保持同步了，
                // 都是最新的
            },

            beforeDestroy() {
                // 当执行beforeDestroy钩子函数的时候，Vue实例就已经从
                // 运行阶段进入到了销毁阶段；
                // 当执行beforeDestroy的时候，实例身上所有的data和所有
                // 的methods，以及过滤器、指令。。。。。。都处于可用状态，
                // 此时，还没有真正执行销毁的过程
            },

            destoryed() {
                // 当执行到destroyed函数的时候，组件已经被完全销毁了，
                // 此时，组件中所有的数据、方法、指令、过滤器。。。。。。
                // 都已经不可用了
            }

        });
    </script>
</body>
</html>